/*
 * @Author: xiaosihan 
 * @Date: 2024-06-25 16:41:21 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-01 22:01:43
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./bottomContorl.module.less";
import handPNG from "./img/hand.png";
import selectionPNG from "./img/selection.png";
import addLablePNG from "./img/addLable.png";
import modelTreeIconPNG from "./img/modelTreeIcon.png";
import blast_iconPNG from "./img/blast_icon.png";

import measurePNG from "./img/measure.png";
import cutPNG from "./img/cut.png";
import pointsPNG from "./img/points.png";

import partCollaborateStore from "../../partCollaborateStore";
import model3dRender from "../model3dRender";
import clsx from "clsx";
import userStore from "@views/userStore";
import loginStore from "@views/pc/LoginModal/loginStore";
import dragModelStore from "../DragModel/dragModelStore";
import { Tooltip } from "antd";

interface Iprops {
    children?: ReactNode
}

// 底部控制器
export default function BottomContorl() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [controlType, setControlType] = useState(partCollaborateStore.controlType);
    const [addMark, setAddMark] = useState(partCollaborateStore.addMark);
    const [selectModel, setSelectModel] = useState(partCollaborateStore.selectModel);
    const isDemo = (location.hash === "#/partCollaborateDemo");

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setControlType(partCollaborateStore.controlType);
        setAddMark(partCollaborateStore.addMark);
        setSelectModel(partCollaborateStore.selectModel);
    }), []);

    return (
        <div className={styles.bottomContorl} >

            {
                [
                    {
                        title: "选择模型", img: selectionPNG, active: selectModel,
                        onClick() {
                            partCollaborateStore.setSelectModel(!selectModel);
                            partCollaborateStore.setControlType("OrbitControls");
                        }
                    },
                    {
                        title: "拖动", img: handPNG, active: !(selectModel || addMark) && (controlType === "MapControls"),
                        onClick() {
                            model3dRender.setLeftKeyDrop();
                            partCollaborateStore.setSelectModel(false);
                            partCollaborateStore.setControlType("MapControls");
                        }
                    },
                    {
                        title: "模型树", img: modelTreeIconPNG, active: false,
                        onClick() {
                            dragModelStore.setShowList("model_tree");
                        }
                    },
                    {
                        title: "爆炸图", img: blast_iconPNG, active: false,
                        onClick() {
                            dragModelStore.setShowList("model_blast");
                        }
                    },
                    {
                        title: "剖切", img: cutPNG, active: false,
                        onClick() {
                            dragModelStore.setShowList("pro_file");
                        }
                    },
                    {
                        title: "测量", img: measurePNG, active: false,
                        onClick() {
                            dragModelStore.setShowList("model_measure");
                        }
                        // },
                        // {
                        //     title: "顶点", img: pointsPNG, active: false,
                        //     onClick() {
                        //     }
                    }
                ].map((conf, i) => {
                    return (
                        <Tooltip
                            key={i}
                            placement="top"
                            mouseEnterDelay={0}
                            title={conf.title}
                        >
                            <span
                                onClick={conf.onClick}
                                className={clsx(styles.icon, conf.active && styles.active)}
                            >
                                <img src={conf.img} alt="" />
                            </span>
                        </Tooltip>
                    );
                })
            }

            {/* 顶点 */}

            {/* 间隔线 */}
            <span className={styles.spite_line} ></span>

            {/* 添加标注 */}
            <Tooltip
                placement="top"
                mouseEnterDelay={0}
                title="添加标注"
            >
                <span
                    onClick={() => {
                        if (userStore.isLogin || isDemo) {
                            partCollaborateStore.setAddMark(!addMark);
                        } else {
                            loginStore.setShowLoginModal(true);
                        }
                    }}
                    className={clsx(styles.icon, addMark && styles.active)}
                >
                    <img src={addLablePNG} alt="" />
                </span>
            </Tooltip>

        </div>
    );

}